<template>
  <div class="searchBox">
    <a-input
      v-model="searchKey"
      type="search"
      :placeholder="placeholder"
      ref="searchInput"
      @blur="inputBlur"
      @pressEnter="pressEnter"
    />
    <a-icon
      type="search"
      class="searchIcon cursor-pointer"
      ref="searchIcon"
      @click.native="searchIconClick"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    },
    // 占位符
    placeholder: {
      type: String,
      default: "可输入关键词进行搜索"
    }
  },
  computed: {
    searchKey: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    }
  },
  methods: {
    searchIconClick() {
      // this.$refs.searchInput.focus();
      this.$emit("search");
    },
    inputBlur() {
      // console.log(this.$refs.searchInput);
    },
    pressEnter() {
      this.$emit("search");
    }
  }
};
</script>

<style lang="scss" scoped>
.searchBox {
  position: relative;
  input[type="search"] {
    border: 1px solid #d9d9d9;
    -webkit-transition: width box-shadow 0.5s;
    padding: 4px 16px;
    height: 32px;
    min-width: 300px;
    border-radius: 16px;
    // cursor: pointer;
    outline: none;
  }
  input[type="search"]:focus {
    min-width: 300px;
    cursor: auto;
    border-color: #758cff;
    box-shadow: 0 0 0 2px rgb(77 101 253 / 20%);
  }
  .searchIcon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translate(50%, -50%);
  }
}
</style>
